<template>
  <div class="box">
    <h1>pinia</h1>
    <div class="container">
      <Child></Child>
      <Child1></Child1>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { mainModule } from "process";
import Child from "./Child.vue";
import Child1 from "./Child1.vue";
//vuex:集中式管理状态容器,可以实现任意组件之间通信！！！
//核心概念:state、mutations、actions、getters、modules

//pinia:集中式管理状态容器,可以实现任意组件之间通信！！！
//核心概念:state（保存数据）、actions（处理异步/数据）、getters(计算属性)
//pinia写法:选择器API、组合式API
// 使用步骤：
//   1.创建大仓库 store/index.ts
//   2.在入口文件main.ts引入仓库 import store from './store'
//   3.在入口文件 main.ts，使用仓库app.use(), Vue菜单能看到pinia
//   4.用defineStore定义小仓库，选择式或组合式API写法不一样
// 5.在组件里使用
</script>

<style scoped>
.box {
  width: 600px;
  height: 400px;
  background: skyblue;
}
.container{
  display: flex;
}
</style>